<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HR3RRyTsXYdQ3QzzG5yUkg0q"></script>
		<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
		<link href="css/called.css" rel="stylesheet" />
		<style>
			.mui-bar-transparent{
				background-color:green ;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">召集令</h1>
		</header>
		<div class="mui-content">
			<div id="allmap">
				地图加载中...
			</div>
			<div>
				<div class="list">
					<span class="list-span">召集列表</span>
					<a href="#" class="list-a">时间</a>
					<a href="#" class="list-a">距离</a>
					<span class="list-span2">排序:</span>
				</div>
				<div style="height: 1px; width: 100%;"></div>
				<div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="img/tx1.jpg">
								<div class="mui-media-body">
									23日云南省博一日游！早八点昆明国际青旅门口集合！
									<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>

								</div>

							</a>
							<div id="confirmBtn" class="button" style="float: right;"><button type="button" class="mui-btn">响应召集</button></div>
						</li>

					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="img/tx3.jpg">
								<div class="mui-media-body">
									23日云南省博一日游！早八点昆明国际青旅门口集合！
									<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>

								</div>

							</a>
							<div class="button" style="float: right;"><button type="button" class="mui-btn">响应召集</button></div>
						</li>

					</ul>
				</div>
			</div>
		</div>
		<div id="info"></div>
		<nav class="mui-bar mui-bar-tab">
			<button type="button" id="b-page" class="mui-btn mui-btn-danger">发起召集</button>
		</nav>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var info = document.getElementById("info");
			mui.plusReady(function() {
				plus.geolocation.getCurrentPosition(translatePoint, function(e) {
					mui.toast("异常:" + e.message);
				});
			});

			function translatePoint(position) {
				var currentLon = position.coords.longitude;
				var currentLat = position.coords.latitude;
				var gpsPoint = new BMap.Point(currentLon, currentLat);
				BMap.Convertor.translate(gpsPoint, 2, initMap); //坐标转换
			}

			function initMap(point) {
				map = new BMap.Map("allmap"); //创建地图
				map.addControl(new BMap.NavigationControl());
				map.addControl(new BMap.ScaleControl());
				map.addControl(new BMap.OverviewMapControl());
				map.centerAndZoom(point, 15);
				map.addOverlay(new BMap.Marker(point));

			}
			document.getElementById("confirmBtn").addEventListener('tap', function() {
				var btnArray = ['否', '是'];
				mui.confirm('是否立即响应召集，加入讨论群组？', '23日云南省博一日游...', btnArray, function(e) {
					if(e.index == 1) {

						if(window.plus) {
							mui.openWindow({
								url: 'called-talk.html',
								id: 'called-talk.html',
								style: {},
								extras: {},
								show: {
									autoShow: true,
									aniShow: "slide-in-right",
									duration: 100
								},
								waiting: {
									autoShow: true,
									title: "加载中....",
									options: {}
								}
							})
						}

					} else {
						info.innerText = 'MUI没有得到你的认可，继续加油'
					}
				})
			});
			var called = document.getElementById("b-page");
			called.addEventListener("tap", function() {
				var title = this.getAttribute("title");
					mui.openWindow({
						url: 'release-called.html',
						id: 'release-called.html',
						style: {},
						extras: {
							title: title
						},
						show: {
							autoShow: true,
							aniShow: "slide-in-right",
							duration: 100
						},
						waiting: {
							autoShow: true,
							title: "加载中....",
							options: {}
						}
					})
			})
		</script>
	</body>

</html>